<template>
  <!-- 登录&注册 -->
  <div id="userLogin">
    <van-form @submit="onSubmit">
      <p style="padding-left: 15px">登录体验更多精彩</p>
      <van-field v-model="phone"
                 name="phone"
                 label="手机号"
                 placeholder="请输入手机号"
                 :rules="[{ required: true, message: '请填写手机号' }]" />
      <van-field v-model="password"
                 type="password"
                 name="password"
                 label="密码"
                 placeholder="密码"
                 :rules="[{ required: true, message: '请填写密码' }]" />
      <div style="margin: 16px;">
        <van-button round
                    block
                    type="info"
                    :color="globalObj.normColor"
                    native-type="submit">登录</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { userPhoneLogin } from "@/api/login"
export default {
  name: "userLogin",
  data () {
    return {
      phone: '',
      password: '',
    };
  },
  methods: {
    onSubmit (values) {
      userPhoneLogin(values).then(async res => {
        // 将用户数据存储到Vuex
        await this.$store.commit('getUserInfo', {
          cookie: res.cookie,
          userData: {
            userId: res.profile.userId,
            nickname: res.profile.nickname,
            avatarUrl: res.profile.avatarUrl,
          }
        })
        await this.$store.commit('getUserState', true)
        this.$router.push('/');
      })
    },
  }
}
</script>

<style scoped>
#userLogin {
  width: 97%;
  margin: 0 auto;
}
</style>